/*  #ifdef  H5 || APP-PLUS  */
:root{
    --mi-primary-color: #fa4126;
    --mi-space:12px;
    --mi-inner-space: 5px;
    --mi-radius-fillet: 4px;
    font-size: 14px;
}
/*  #endif  */

/* #ifdef MP */
page{
    --mi-primary-color: #fa4126;
    --mi-space:12px;
    --mi-radius-fillet: 4px;
    font-size: 14px;
}
/*  #endif  */


.img{
    width: 100%; height: 100%;
}

.top_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

/*
	顶部导航栏样式
 */
.nav_bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--mi-space);
}
/*--------------------------------------顶部导航栏结束-------------------------------------------*/

/*
	底部导航栏样式
 */
.tab_bar{
    /*position: absolute; bottom: 0; left: 0; right: 0; z-index: 999;*/
}
.tab_bar_ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    height: 50px;
}
.shadow.tab_bar_ul{
    box-shadow: 0px 0px 6px #0000001f;
}
.right.tab_bar_ul{
    border-radius: 0px;
}
.fillet.tab_bar_ul{
    border-radius: var(--mi-radius-fillet);
}
.circle.tab_bar_ul{
    border-radius: calc(50px / 2);
}
.tab_bar_li{
    display: flex; flex-direction:column; justify-content: center; align-items: center;

}
.tab_bar_li_img{
    width: 20px; height: 20px;
}
.tab_bar_li_text{
    font-size: 0.8em;
}
/*--------------------------------------底部导航栏结束-------------------------------------------*/


/*--------------------------------------网格开始-------------------------------------------*/
.grid{
    font-size: 14px;
    display: flex; flex-wrap: wrap; padding-top: 12px; overflow: hidden;
}
.circle.grid{
    border-radius: 50%;
}
.fillet.grid{
    border-radius: var(--mi-radius-fillet);
}
.right.grid{
    border-radius: 0px;
}
.grid_item{
    flex-shrink: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    margin-bottom: 12px;
    font-size: 12px; color: #444;
}
.grid_item_img{
    width: 44px; height: 44px; margin-bottom: 3px;
    overflow: hidden;
}
.col_3 .grid_item{
    width: 33.3333333%;
}
.col_4 .grid_item{
    width: 25%;
}
.col_5 .grid_item{
    width: 20%;
}
.circle.grid_item_img{
    border-radius: 50%;
}
.fillet.grid_item_img{
    border-radius: var(--mi-radius-fillet);
}
.right.grid_item_img{
    border-radius: 0px;
}
/*--------------------------------------网格结束-------------------------------------------*/

/**
    轮播图开始
 */
.banner{
    overflow: hidden;
    /*width: 100%;*/
    /* height: 150px; */
}
.shadow.banner{
    box-shadow: 0px 0px 6px #0000001f;

}
.banner_item{
    width: 100%;height: 100%;
}
.right.banner{
    border-radius: 0px;
}
.fillet.banner{
    border-radius: var(--mi-radius-fillet);
}
/*--------------------------------------轮播图结束-------------------------------------------*/

/**
    图片魔方
 */
/*.col_1.image_ul, .col_2.image_ul, .col_3.image_ul, .col_4.image_ul, .col_5.image_ul{*/
/*    display: flex; flex-wrap: wrap;overflow: hidden;*/
/*}*/
.image_ul{
    overflow: hidden;
}
.no_image_space.image_ul{
    --mi-image-inner-space:0px;
}
.image_space.image_ul{
    --mi-image-inner-space:5px;
}
.image_ul_inner{
    display: flex; flex-wrap: wrap; width: calc(100% + var(--mi-image-inner-space));
}
.image_ul.right{
    border-radius: 0px;
}
.image_ul.fillet{
    border-radius: var(--mi-radius-fillet);
}
.image_li{
    flex-shrink: 0;
    margin-bottom: var(--mi-image-inner-space);
}
.col_1.image_ul .image_li{
    width: 100%;
}
.col_2.image_ul .image_li{
    width: calc(50% - var(--mi-image-inner-space)); margin-right: var(--mi-image-inner-space);
}
.col_3.image_ul .image_li{
    width: calc(33.3333333% - var(--mi-image-inner-space)); margin-right: var(--mi-image-inner-space);
}
.col_4.image_ul .image_li{
    width: calc(25% - var(--mi-image-inner-space)); margin-right: var(--mi-image-inner-space);
}
.col_5.image_ul .image_li{
    width: calc(20% - var(--mi-image-inner-space)); margin-right: var(--mi-image-inner-space);
}
.image_ul  .image_li_left, .image_ul .image_li_right{
    width: calc(50% - var(--mi-image-inner-space)); margin-right: var(--mi-image-inner-space);
}
.image_ul .image_li_right_hd, .image_ul .image_li_right_ft{
    height: calc((100% - var(--mi-image-inner-space)) / 2);
}
.image_ul .image_li_right_hd{
    margin-bottom: var(--mi-image-inner-space);
}
.image_ul .image_li_right_ft{
    display: flex;
}
.image_ul .image_li_right_ft_li{
    flex: 1;
}
/*--------------------------------------图片魔方结束-------------------------------------------*/

/**
    文章列表
 */
.article{
    background-color: #fff;
}
.article_item{
    display: flex;padding: 10px;
}
.article_item_img{
    width: 100px; height:70px; margin-right: 10px;
}
.article_item_b{
    display: flex; flex-direction: column; justify-content: space-between;
}
/*--------------------------------------文章列表结束-------------------------------------------*/

/**
    搜索框列表
 */
.search{
    position: relative;
    padding: 8px;
    box-sizing: border-box;
}
.search .search_input_box{

}
.search .search_input{
    height: 30px;
    border: none;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
}
.search .search_input:focus{
    outline: 0; border: none;
}
.right.search .search_input{
    border-radius: 0px;
}
.fillet.search .search_input{
    border-radius: var(--mi-radius-fillet);
}
.circle.search .search_input{
    border-radius: calc(32px / 2);
}
/*--------------------------------------搜索框结束-------------------------------------------*/


/**
    标题栏
 */
.tpl_1.diy_header {
    --mi-header-height:50px;
}
.tpl_2.diy_header{
    --mi-header-height:65px;
}
.diy_header_inner {
    padding: 0 12px; box-sizing: border-box; display: flex; overflow: hidden;
}
.diy_header_title{
    font-size: 18px;
}
.diy_header_sub_title{
    font-size: 12px;
}
.diy_header_right{
    font-size: 14px; color: #666;
}
.tpl_1 .diy_header_inner{
    align-items: center; justify-content: space-between; height: var(--mi-header-height);
}
.tpl_1 .diy_header_left{
    display: flex; align-items: center;
}
.tpl_1 .diy_header_title{
    margin-right: 12px;
}
.tpl_2 .diy_header_inner{
    flex-direction: column; justify-content: center; align-items: center; height: var(--mi-header-height);
}
.tpl_2 .diy_header_left{
    display: flex; align-items: center; flex-direction: column; justify-content: center;
}
.tpl_2 .diy_header_right{
    display: none;
}
.right .diy_header_inner{
    border-radius: 0px;
}
.fillet .diy_header_inner{
    border-radius: 4px;
}
.circle .diy_header_inner{
    border-radius: calc(var(--mi-header-height) / 2);
}




/*--------------------------------------标题栏结束-------------------------------------------*/


/**
    商品列表
 */
.goods{
    --mi-goods-space:12px;
    --mi-goods-inner-space:5px;
}
.goods{
    overflow: hidden;
}
.goods .goods_ul{
    display: flex; flex-wrap: wrap; width: calc(100% + var(--mi-goods-inner-space));
}
.goods .goods_li{
    display: flex; margin-bottom: var(--mi-goods-inner-space); box-sizing: border-box; background-color: #fff; overflow: hidden;
}
.goods_li_right .goods_li{
    border-radius: 0px;
}
.goods_li_fillet .goods_li{
    border-radius: var(--mi-radius-fillet);
}
.goods .goods_li_title{
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;			/*特别显示模式*/
    -webkit-line-clamp: 2;			/*行数*/
    line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3em;
}
.goods .goods_li_con{
    box-sizing: border-box;
}
.goods .line_price{
    text-decoration: line-through; color: #999; font-size: 10px;
}
.goods .price{
    color: var(--mi-primary-color); font-size: 14px;
}
.goods .cart{
    efont-size: 14px; width: 24px; color: var(--mi-primary-color);
}
.col_1.goods .goods_li{
    width: 100%; padding: var(--mi-goods-inner-space); margin-right: var(var(--mi-goods-inner-space));
}
.col_1.goods .goods_li_img{
    width: 110px; height: 110px; margin-right: var(--mi-goods-inner-space); flex-shrink: 0;
}
.col_1.goods .goods_li_con{
    flex: 1;
}
.col_2.goods .goods_li{
    width: calc(50% - var(--mi-goods-inner-space)); flex-wrap: wrap; margin-right: var(--mi-goods-inner-space);
}
.col_2.goods .goods_li_img{
    width: 100%;
}
.col_2.goods .goods_li_con{
    width: 100%; padding: var(--mi-goods-inner-space);
}
.col_3.goods .goods_li{
    width: calc(33.3333333% - var(--mi-goods-inner-space));flex-wrap: wrap; margin-right: var(--mi-goods-inner-space);
}
.col_3.goods .goods_li_img{
    width: 100%;
}
.col_3.goods .goods_li_con{
    width: 100%; padding: var(--mi-goods-inner-space);
}

.right.goods .goods_li{
    border-radius: 0px;
}
.fillet.goods .goods_li{
    border-radius: var(--mi-radius-fillet); overflow: hidden;
}
/*--------------------------------------商品列表结束-------------------------------------------*/

/**
    促销卡片
 */
.sell_card{
    overflow: hidden;
}
.right.sell_card{
    border-radius: 0px;
}
.fillet.sell_card{
    border-radius: var(--mi-radius-fillet);
}
.sell_card_hd{
    display: flex;
    align-items: center;
}
.sell_card_hd_li{
    width: 25%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*align-items: flex-end;*/
}
.sell_card_title{
    font-size: 16px;
}
.sell_card_sub_title{
    font-size: 12px; color: #999;
}
.active .sell_card_title{
    color: var(--mi-primary-color); font-weight: bold;
}
.tpl_1.sell_card{
    background-color: #fff; padding: 12px;
}
.tpl_1  .sell_card_hd{
    margin-bottom: 12px;
}
.tpl_2 .sell_card_hd{
    padding: 12px 0;
}
/*--------------------------------------促销卡片结束-------------------------------------------*/
